<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header" v-if="searchForm.productId>0">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item class="el-search-item">
				{{categoryIdName}}-->{{productIdName}}-->规格</span>
              <el-button type="primary" plain icon="el-icon-plus" @click="openAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%" v-loading="tableLoading" element-loading-text="数据正在加载中...">
          <el-table-column prop="ggNo" label="编码" align="center" sortable></el-table-column>
          <el-table-column prop="ggName" label="名称" align="center" sortable></el-table-column>
          <el-table-column prop="ggValue" label="值" align="center" sortable></el-table-column>
          <el-table-column label="值类型" align="center" sortable width="90">
			  <template slot-scope="scope">
			  	<span v-if="scope.row.ggValueType=='int'">整数</span><span v-if="scope.row.ggValueType=='string'">字符串</span>
			    <span v-if="scope.row.ggValueType=='float'">浮点数</span>
			  </template>
		  </el-table-column>
		<el-table-column label="类型" align="center" sortable width="90">
			<template slot-scope="scope">
				<span v-if="scope.row.ggType==1">单选框</span><span v-if="scope.row.ggType==2">复选框</span><span v-if="scope.row.ggType==3">下拉框</span>
			  	<span v-if="scope.row.ggType==4">输入框</span><span v-if="scope.row.ggType==7">自定义-区间输入框</span>
			</template>
		</el-table-column>
          <el-table-column label="自定义" align="center" sortable width="90">
			  <template slot-scope="scope">
			  	<span v-if="scope.row.ggTypeUdo==1">可以</span><span v-if="scope.row.ggTypeUdo==0">否</span>
			  </template>
		  </el-table-column>
          <el-table-column prop="ggLevel" label="排序" align="center" sortable width="90"></el-table-column>
          <el-table-column prop="ggMsg" label="对外说明" align="center" sortable></el-table-column>
          <el-table-column prop="ggMsgOut" label="内部说明" align="center" sortable></el-table-column>
          <el-table-column label="公式叠加值" align="center" sortable>
			  <template slot-scope="scope">
			  	{{scope.row.gsTypeName}}{{scope.row.gsTypeValue}}
			  </template>
		  </el-table-column>
          <el-table-column label="必填" align="center" sortable width="90">
			  <template slot-scope="scope">
			  	<span v-if="scope.row.isNeed==1">是</span><span v-if="scope.row.isNeed==0">否</span>
			  </template>
		  </el-table-column>
          <el-table-column v-if='hasPerm("product:productGg:list") && searchForm.productId>0' label="更多操作" align="center" width="130">
            <template slot-scope="scope">
              <el-button @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                       :current-page="pageNum" :page-sizes="[10, 20, 30]" :page-size="pageSize" :total="total">
        </el-pagination>
      </el-card>
      <!--新增 编辑对话框-->
    <el-drawer :title="dialog.dialogTitle" :visible.sync="dialog.visible" :direction="dialog.direction" :size="dialog.size" :before-close="handleClose">
    <el-row class="drawer-table">
      <el-col :span="24">
        <el-form :rules="rules" ref="productGgForm" :model="productGgForm" size="small" label-width="100px">
          <el-form-item prop="ggNo" label="编码">
            <el-input v-model="productGgForm.ggNo" placeholder="请输入编码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="ggName" label="名称">
            <el-input v-model="productGgForm.ggName" placeholder="请输入规格名称" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="ggValue" label="值">
            <el-input v-model="productGgForm.ggValue" placeholder="请输入值  ,号隔开" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="ggValueType" label="值类型">
			<el-radio-group v-model="productGgForm.ggValueType">
				<el-radio label="int" key="int" value="int">整数</el-radio>
				<el-radio label="string" key="string" value="string">字符串</el-radio>
				<el-radio label="float" key="float" value="float">浮点数</el-radio>
			</el-radio-group>
          </el-form-item>
          <el-form-item prop="ggType" label="填写方式">
			  <el-select v-model="productGgForm.ggType" placeholder="选择" clearable>
			  	<el-option :value="1" label="单选框"></el-option>
			  	<el-option :value="2" label="复选框"></el-option>
			  	<el-option :value="3" label="下拉框"></el-option>
			  	<el-option :value="4" label="输入框"></el-option>
			  	<el-option :value="7" label="自定义-区间输入框"></el-option>
			  </el-select>
          </el-form-item>
          <el-form-item label="自定义输入">
			  <el-radio-group v-model="productGgForm.ggTypeUdo">
			  	<el-radio :label="1">可以</el-radio>
			  	<el-radio :label="0">否</el-radio>
			  </el-radio-group>
          </el-form-item>
          <el-form-item prop="ggLevel" label="排序">
            <el-input v-model="productGgForm.ggLevel" placeholder="降序" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="gsTypeValue" label="公式叠加值">
			  <el-select v-model="productGgForm.gsTypeName" placeholder="选择" clearable style="width:5rem;">
			  	<el-option value="加" label="加">加</el-option>
			  	<el-option value="乘" label="乘">乘</el-option>
			  	<el-option value="减" label="减">减</el-option>
			  </el-select>
            <el-input v-model="productGgForm.gsTypeValue" placeholder="请输入值" auto-complete="off" style="width:7rem;"></el-input>
          </el-form-item>
          <el-form-item label="是否必填">
			  <el-radio-group v-model="productGgForm.isNeed">
			  	<el-radio :label="1">是</el-radio>
			  	<el-radio :label="0">否</el-radio>
			  </el-radio-group>
          </el-form-item>
		  <el-form-item prop="ggMsg" label="对外说明">
		    <el-input v-model="productGgForm.ggMsg" placeholder="请输入对外说明" auto-complete="off"></el-input>
		  </el-form-item>
		  <el-form-item prop="ggMsgOut" label="内部说明">
		    <el-input v-model="productGgForm.ggMsgOut" placeholder="请输入内部说明" auto-complete="off"></el-input>
		  </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="drawer-footer">
      <el-col :span="24">
        <el-button @click="dialog.visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
      </el-col>
    </el-row>
    </el-drawer>

    </el-row>
  </div>
</template>
<script>
  import productGg from "@/api/product/productGg";
  export default {
    data() {
      return {
        // 表格数据
        tableData: [],
		productIdName: null,
		categoryIdName: null,
        tableLoading: false,
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 10,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {productId: null, startTime: null, endTime: null,},
        // 弹出层
        dialog: {flag: 0,dialogTitle: "",visible: false,direction: 'rtl',size: '35%'},
        // 表单参数
        productGgForm: {
          productGgId: null,
          categoryId: null,
          productId: null,
          ggNo: null,
          ggName: null,
          ggValue: null,
          ggValueType: null,
          ggType: null,
          ggTypeUdo: null,
          ggLevel: null,
          ggMsg: null,
          ggMsgOut: null,
          gsTypeName: null,
          gsTypeValue: null,
          isNeed: null,
        },
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          productGgId: [{required: true,trigger: "change",message: "请输入产品规格定义"}],
          categoryId: [{required: true,trigger: "change",message: "请输入栏目"}],
          productId: [{required: true,trigger: "change",message: "请输入产品"}],
          ggNo: [{required: true,trigger: "change",message: "请输入编码"}],
          ggName: [{required: true,trigger: "change",message: "请输入规格名称"}],
          ggValue: [{required: true,trigger: "change",message: "请输入值 , 号隔开"}],
          ggValueType: [{required: true,trigger: "change",message: "请输入int  string float"}],
          ggType: [{required: true,trigger: "change",message: "请输入组合方式 1单选框  2复选框 3下拉框 4输入框 7自定义-区间输入框"}],
          ggTypeUdo: [{required: true,trigger: "change",message: "请输入是否可以自定义输入"}],
          ggLevel: [{required: true,trigger: "change",message: "请输入降序 组合优先级 级别越高值越大"}],
          ggMsg: [{required: true,trigger: "change",message: "请输入对外说明"}],
          ggMsgOut: [{required: true,trigger: "change",message: "请输入内部说明"}],
          gsTypeName: [{required: true,trigger: "change",message: "请输入价格公式 J+  C=*  其它=线下公式编码"}],
          gsTypeValue: [{required: true,trigger: "change",message: "请输入公式叠加值"}],
          isNeed: [{required: true,trigger: "change",message: "请输入0 1必填"}],
        },
      };
    },
    mounted() {
		this.searchForm.productId = this.$route.params.productId;
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
	  this.getDataList();
    },
    created() {
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleClose(done) {
        this.resetForm();
        done();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getDataList();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getDataList();
      },
      // 获取列表
      getDataList() {
        this.tableLoading = true;
        productGg.list({
          current: this.pageNum, size: this.pageSize, productId: this.searchForm.productId,
        }).then(res => {
          if(res.data.code === 2000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
			this.productIdName = res.data.otherKV.productIdName;
			this.categoryIdName = res.data.otherKV.categoryIdName;
          }
          this.tableLoading = false;
        });
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("productGgForm");
        this.dialog.dialogTitle = "新增";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("productGgForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.productGgId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.productGgForm.validate(valid => {
          if(valid){
            this.loading.status = true;
            productGg.saveOrUpdate(this.productGgForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            });
          }
        });
      },
      // 根据id获取信息
      getById(id) {
        productGg.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.productGgForm.productGgId = res.data.data.productGgId;
            this.productGgForm.categoryId = res.data.data.categoryId;
            this.productGgForm.productId = res.data.data.productId;
            this.productGgForm.ggNo = res.data.data.ggNo;
            this.productGgForm.ggName = res.data.data.ggName;
            this.productGgForm.ggValue = res.data.data.ggValue;
            this.productGgForm.ggValueType = res.data.data.ggValueType;
            this.productGgForm.ggType = res.data.data.ggType;
            this.productGgForm.ggTypeUdo = res.data.data.ggTypeUdo;
            this.productGgForm.ggLevel = res.data.data.ggLevel;
            this.productGgForm.ggMsg = res.data.data.ggMsg;
            this.productGgForm.ggMsgOut = res.data.data.ggMsgOut;
            this.productGgForm.gsTypeName = res.data.data.gsTypeName;
            this.productGgForm.gsTypeValue = res.data.data.gsTypeValue;
            this.productGgForm.isNeed = res.data.data.isNeed;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
            productGg.remove(row.productGgId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList();
            }else {
              this.$message.error(res.data.msg);
            }
          });
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {margin-bottom: 0;}
  .el-card/deep/.el-card__body {padding: 0 10px 10px 10px !important;}
  .el-card/deep/.el-card__header {border-bottom: none !important;padding: 10px 10px !important;}
</style>